<template>
  <div class="mapv-block">
    <l-map class="leafletmap"  ref="map" :zoom="zoom" :options="mapOptions" :center="center">
      <l-marker v-for="(item,index) in pointList" :key="index" :lat-lng="item"
      :icon="getIcon(item)"
      @click="markerClick(item,index)" 
      >
        <l-tooltip :content="item.name"/>
      </l-marker>
      <l-polyline v-for="(item,index) in polylineList" :key="index"  :lat-lngs="getPoints(item.latlngs)" :color="item.color"></l-polyline>
      
      <l-circle-marker v-for="(item,index) in circleMarkerList" :key="index" 
        :lat-lng="item.center" 
        :radius="item.radius" 
        :color="item.color || 'rgba(254,175,3,0.7)'" 
        :fillColor="item.color|| 'rgba(254,175,3,0.7)'" fillOpacity="1"
        @click="circleClick(item)" 
      ><l-tooltip :options="tooltipoptions"  v-if="item.title" :content="item.title"/></l-circle-marker>
      
      <l-circle v-for="(item,index) in circleList" :key="index" :lat-lng="item.center" 
      :radius="item.radius" :color="item.color" :fillColor="item.color" fillOpacity="1"
      @click="circleClick(item)" 
      >
      <l-tooltip  :options="tooltipoptions"  v-if="item.title" :content="item.title"/>
      </l-circle>
    </l-map>
    <div class="tipsBox" v-if="legend">
			<li v-for="(item,index) in tipData" :key="index" ><span :style="{background:color[index]}"></span>{{item[0].dqxmjd}}</li>
		</div>
  </div>
</template>

<script>
import { LMap, LTileLayer, LMarker, LPopup,LTooltip,LPolyline,LCircleMarker,LCircle } from 'vue2-leaflet'
import {getCurvePoints,calcCoorArr} from "@/const/CurveUtil";
import L from 'leaflet'
export default {
  name: 'VueLeaflet.vue',
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LPopup,LTooltip,LPolyline,LCircleMarker,LCircle
  },
  props:{
    circleList:{
        type:Array
      },
      circleMarkerList:{
        type:Array
      },
      polylineList:{
        type:Array
      },
			pointList:{
				type:Object
			},
			center:{
				type:Object,
				default:function(){
          return {lat: 29.751342, lng: 106.642792}
        }
			},
      tooltipoptions:{
				type:Object,
				default:function(){
          return { permanent: true, interactive: true }
        }
			},
      zoom:{
				type:Number,
				default:5
			},
      showMarker:{
				type:String,
				default:'xmfx'
			},
			legend:{
				type:Boolean,
				default:false
			}
		},
  data () {
    return {
       circle: {
        center: [106.642792, 29.751342],
        radius: 4500,
        color: 'red'
      },
      polylineColor:"",
      circleMarkerColor:"",
      mapOptions: {
        zoomControl: false,
        attribution: '',
        crs: this.$CRS_CQ
      }, 
      // center: L.latLng(44.24209829,85.966996072),
      //  zoom: 9,
      labelIndex:-1,
				icon1:L.icon({iconUrl: require("@/assets/images/ea8518.png"),}),
				icon2:L.icon({iconUrl: require("@/assets/images/d81e06.png"),}),
				icon3:L.icon({iconUrl: require("@/assets/images/f4ea2a.png"),}),
				icon4:L.icon({iconUrl: require("@/assets/images/1296df.png"),}),
				color:['#d81e06','#ec8447','#f4ea2a','#1296db'],
				tipData:[],
    }
  },
  mounted() {
    this.$addEsri(this.$refs.map.mapObject);
    this.$setMeasureStyle(this.$refs.map.mapObject);
  },
  methods:{
    getPoints(fromToCenter){
      let curve = getCurvePoints(fromToCenter);
      // let curve = calcCoorArr(fromToCenter[0], fromToCenter[1],100);
      return curve;
    },
    getIcon(item){
      if(this.showMarker=='point'){
          // size:{width:24,height:32}}" 
        if(item.sfzdxm==1){
          return this.icon2
        }
        return this.icon1;
      }
      if(this.showMarker=='xmfxzdxm'){
          // size:{width:24,height:32}}" 
        if(item.sfzdxm==1){
          return this.icon2
        }
        return this.icon1;
      }
      if(this.showMarker=='xmjk'){
          // size:{width:24,height:32}}" 
        if(item.dqxmjd=='立项用地规划许可'){
          return this.icon1
        }
        if(item.dqxmjd=='工程建设许可'){
          return this.icon2
        }
        if(item.dqxmjd=='施工许可'){
          return this.icon3
        }
        return this.icon4;
      }
      return  this.icon1;
    },
			groupBy(array, f) {
				var groups = {};
				array.forEach(function (o) {
					var group = JSON.stringify(f(o));
					groups[group] = groups[group] || [];
					groups[group].push(o);
				});
				return Object.keys(groups).map(function (group) {
					return groups[group];
				});
			},
			// 移入标点
			markerOver(index){
				this.labelIndex=index;
				let x=event.clientX
				let y=event.clientY
				let labelStyle=document.getElementById('label'+index);
				labelStyle.style.left=(x+10)+'px';//单位
				labelStyle.style.top=(y)+'px';
			},
			// 移出标点
			markerOut(index){
				this.labelIndex=-1
			},
			//点击标点
			markerClick(item,index){
				let clientX=event.clientX
				let clientY=event.clientY
				this.$emit('markerClick',{item,index,clientY,clientX})
			},
      circleClick(item){
        this.$emit('circleClick',item) 
      }
		},
    watch:{
			pointList:{
				handler:function(){
					let _this =this
					this.tipData=this.groupBy(_this.pointList,function(item){
						return item.dqxmjd
					})
				},
				deep:true
			},
		}
}
</script>
<style lang="scss">
	.mapv-block{
		width:100%;
		height:100%;
		position: relative;
    border:1px solid #00F9FC;
    .tipsBox{
			width:12vw;
			height:14vh;
			position: absolute;
			bottom:0;
			right:0;
			background: rgba(0,23,94,.7);
			padding:.5vw 1vw;
			box-sizing: border-box;
			li{
				list-style: none;
				width: 100%;
				line-height: 3vh;
				color:#fff;
				font-size:12px;
				span{
					width:10px;
					height:10px;
					border-radius: 50%;
					display: inline-block;
					background: #0000EE;
					margin-right:1vh
					
				}
			}
		}
	}
.leafletmap {
	height: 100%; 
  width: 100%; 
}
.leaflet-container {
    background: #000a3c;
}
.leaflet-container .leaflet-marker-pane img {
    margin-top: -30px !important;
    width: 30px !important;
    height: 30px !important;
}
.leaflet-control-attribution{
  display: none !important;
}
</style>

